<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console2.css') }}"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md8">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        训练概况
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">训练类型</div>
                                    <div class="count pear-text">应急事件模拟</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">处置类型</div>
                                    <div class="count pear-text">协作处置</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">情景类型</div>
                                    <div class="count pear-text">6</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">平均完成时间</div>
                                    <div class="count pear-text">12min</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        训练情况
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">训练次数</div>
                                    <div class="count pear-text">3</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">成功处置率</div>
                                    <div class="count pear-text">67%</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">最快完成时间</div>
                                    <div class="count pear-text">9分钟</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">最慢完成时间</div>
                                    <div class="count pear-text">18分钟</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">状态监控</div>
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-records" style="background-color:#ffffff;min-height:600px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="demo2"></div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">训练信息</div>
            <div class="layui-card-body">
                <ul class="pear-card-status">
                    {% for i in disk_partitions_list %}
                        <li>
                            <p></p>
                            <p></p>
                            训练名称&nbsp;<span>攻防事件</span>&nbsp;&nbsp;
                            重要程度<span> A</span>&nbsp;&nbsp;
                            <br/>
                            <br/>
                            7天使用总次数&nbsp;<span>1</span>&nbsp;&nbsp;
                           7天使用比例<span>100%</span>
                            <br/>
                            <a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-primary pear-reply">详情</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">参与信息</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-skin="line">
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>名称</td>
                        <td>应急事件演练</td>
                    </tr>

                    <tr>
                        <td>模拟地点</td>
                        <td>深圳监所</td>
                    </tr>
                    <tr>
                        <td>预计参与警员数</td>
                        <td>1-5人</td>
                    </tr>
                    <tr>
                        <td>预计参与犯人数</td>
                        <td>1-5人</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% include 'admin/common/footer.html' %}
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            element = layui.element,
            count = layui.count,
            echarts = layui.echarts

        var chartDom = document.getElementById('echarts-records');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: '表现情况'
          },
          legend: {
            data: ['上次表现', '该次表现']
          },
          radar: {
            // shape: 'circle',
            indicator: [
              { name: '袭警', max: 6500 },
              { name: '脱逃', max: 16000 },
              { name: '打斗', max: 30000 },
              { name: '急症', max: 38000 },
              { name: '受伤', max: 52000 },
              { name: '罢工', max: 25000 }
            ]
          },
          series: [
            {
              name: 'Budget vs spending',
              type: 'radar',
              data: [
                {
                  value: [4200, 3000, 20000, 35000, 50000, 18000],
                  name: '平均值'
                },
                {
                  value: [5000, 14000, 28000, 26000, 42000, 21000],
                  name: '中位数'
                }
              ]
            }
          ]

        };


    myChart.setOption(option);


    option && myChart.setOption(option);

  });

</script>
</body>
</html>